<template>
  <section>
    <el-row>
      <el-col :span="6">
        <el-input placeholder="请输入内容" v-model="searchKey" prefix-icon="el-icon-fa-search">
          <div slot="append">
            <el-button type="primary" icon="el-icon-fa-search" @click=" pager.pager.pageNumber = 1 ;doSearch()"></el-button>
          </div>
        </el-input>
      </el-col>
      <el-col :span="6" :offset="12">
        <el-button type="primary" icon="el-icon-fa-plus" @click="addProvenance" size="small">添加生产商</el-button>
      </el-col>
    </el-row>
    <el-table :data="pager.dataList" border stripe style="width: 100%">
      <el-table-column prop="id" label="ID" header-align="center" align="center" width="55">
      </el-table-column>
      <el-table-column prop="name" label="厂商名" show-overflow-tooltip header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="pesn" label="产品执行标准号" show-overflow-tooltip header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="nofpl" label="食品生产许可证编号"  show-overflow-tooltip header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="hotLine" label="厂商服务热线"  show-overflow-tooltip header-align="center" align="center">
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip header-align="center" align="center">
        <template slot-scope="scope">
          <el-button-group>
            <el-button title="编辑生产商" size="mini" type="primary" icon="el-icon-fa-edit"></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
        <el-row>
            <el-col :span="6" :offset="18">
                <el-pagination background small style="float:right" layout="prev, pager, next"
                               :total="pager.pager.recordCount" :page-size="pager.pager.pageSize"
                               :current-page.sync="pager.pager.pageNumber" v-show="pager.pager.pageCount != 0"
                               >
                </el-pagination>
            </el-col>
        </el-row>

         <!-- 弹框区域-->
        <el-dialog :title="provenance.id == 0 ? '添加生产厂家' : '编辑生产厂家' " :visible.sync="addEditShow" width="30%">
            <el-form :model="provenance" :rules="$rules" ref="provenanceForm">
                <el-form-item label="厂商名称" :label-width="formLabelWidth" prop="growingDistrict">
                    <el-input v-model="provenance.growingDistrict" auto-complete="off" suffix-icon="el-icon-fa-vcard"
                              placeholder="请填写厂商名称"></el-input>
                </el-form-item>
                <el-form-item label="产品执行标准号" :label-width="formLabelWidth" prop="growingDistrictDetail">
                    <el-input v-model="provenance.growingDistrictDetail" auto-complete="off" suffix-icon="el-icon-fa-vcard"
                              placeholder="请填写产品执行标准号"></el-input>
                </el-form-item>
                <el-form-item label="食品生产许可证" :label-width="formLabelWidth" prop="growingDistrict">
                    <el-input v-model="provenance.growingDistrict" auto-complete="off" suffix-icon="el-icon-fa-vcard"
                              placeholder="请填写食品生产许可证"></el-input>
                </el-form-item>
                <el-form-item label="厂商服务热线" :label-width="formLabelWidth" prop="growingDistrictDetail">
                    <el-input v-model="provenance.growingDistrictDetail" auto-complete="off" suffix-icon="el-icon-fa-vcard"
                              placeholder="请填写厂商服务热线"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addEditShow = false ; provenance = {status:'ACTIVED'}">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdateprovenance('provenanceForm')">确 定</el-button>
            </div>
        </el-dialog>
  </section>
</template>

<style>
</style>

<script>
export default {
  data() {
    return {
      searchKey: "",
      pager: {
        pager: {
          pageCount: 1,
          pageNumber: 1,
          pageSize: 15,
          recordCount: 1
        },
        dataList: [
          {
            id: 1,
            name: "霸道厂家",
            pesn: "12343",
            nofpl: "220120090519145277",
            hotLine: "4008888888"
          }
        ]
      },
      selected: [],
      options: [
        {
          name: "塞内加尔",
          icon: "🇸🇳"
        },
        {
          name: "中国",
          icon: "🇨🇳"
        }
      ],
      addEditShow: false,
      resetShow: false,
      grantShow: false,
      type: "role",
      provenance: {
        id: 1,
        flag: {
          name: "塞内加尔",
          icon: "🇸🇳"
        },
        growingDistrict: "ABCDE",
        manorInfo: "EFG",
        level: "特级",
        flavor: "阿伯吃"
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    addProvenance() {
      this.addEditShow = true;
      this.provenance = {
        id: 0,
        flag: {
          name: "",
          icon: ""
        },
        growingDistrict: "",
        manorInfo: "",
        level: "",
        flavor: ""
      };
    }
  }
};
</script>
